<template>
  <div class="app-container">
    <!--  查询表单  -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="选择店铺：" prop="sellerLoginId">
        <el-select v-model="queryParams.sellerLoginId" placeholder="请选择店铺" @change="chooseStore">
          <el-option v-for="(item,index) in storeList" :key="index" :label="item"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号：" prop="orderId">
        <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="大包号：" prop="handoverContentCode">
        <el-input v-model="queryParams.handoverContentCode" placeholder="请输入大包编号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="物流单号：" prop="remark">
        <el-input v-model="queryParams.remark" placeholder="请输入物流单号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <!--      <el-form-item label="交接面单号：" prop="handoverOrderId">-->
      <!--        <el-input v-model="queryParams.handoverOrderId" placeholder="请输入交接面单号" clearable>-->
      <!--          <el-button slot="append" icon="el-icon-search" @click="handoverOrder"></el-button>-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--  订单列表  -->
    <div>

      <el-tabs v-model="tabsValue" type="border-card" @tab-click="tabsClick">
        <!--        <div>-->
        <!--          <el-button type="primary" size="mini" @click="declarationShipment">快速声明发货</el-button>-->
        <!--        </div>-->
        <el-tab-pane v-for="(item,index) in tabsList" :key="index" :label="item.label" :name="item.name">
          <el-row style="margin-bottom: 10px">
            <el-button v-if="queryParams.sellerLoginId" size="mini" type="primary" @click="createBale(chooseOrderList)">
              手动组包
            </el-button>
            <el-button v-if="item.name != '333'" size="mini" type="danger"
                       @click="autoHandoverCommit(chooseOrderList)">
              自动组包
            </el-button>
          </el-row>
          <el-table v-if="item.name != '333' " v-loading="loading" ref="multipleTable" :data="groupOrderList"
                    default-expand-all row-key="id"
                    :tree-props="{children: 'sellerChildOrderList'}" border>
            <el-table-column width="50" align="center">
              <template slot="header" slot-scope="scope">
                <el-checkbox v-model="checkAll" @change="selectAllCheckbox()"></el-checkbox>
              </template>
              <template slot-scope="scope">
                <div v-if="!scope.row.childOrderId">
                  <el-checkbox v-model="scope.row.checkValue" @change="changeCheckbox(scope.row)"></el-checkbox>
                </div>
              </template>
            </el-table-column>
            <!--            <el-table-column type="selection" width="50" align="center">-->

            <!--            </el-table-column>-->
            <el-table-column label="基本信息" min-width="250" prop="orderId">
              <template slot-scope="scope">
                <div v-if="!scope.row.childOrderId">
                  <div>
                    <span>买家姓名：</span>
                    <span>{{ scope.row.aeStoreOrderReceiptAddress.contactPerson }}</span>
                  </div>
                  <div>
                    <span>电话：</span>
                    <span>{{
                        scope.row.aeStoreOrderReceiptAddress.phoneCountry + scope.row.aeStoreOrderReceiptAddress.mobileNo
                      }}</span>
                  </div>
                  <div style="display: flex">
                    <span>国家：</span>
                    <span>
                    <dict-tag :options="dict.type.county_code"
                              :value="scope.row.aeStoreOrderReceiptAddress.country"></dict-tag>
                  </span>
                  </div>
                  <div>
                    <span>收货地址：</span>
                    <span>
                    {{ scope.row.aeStoreOrderReceiptAddress.detailAddress }},
                    {{ scope.row.aeStoreOrderReceiptAddress.city }},
                    {{ scope.row.aeStoreOrderReceiptAddress.province }},
                    {{ scope.row.aeStoreOrderReceiptAddress.country }},
                    {{ scope.row.aeStoreOrderReceiptAddress.zip }}
                  </span>
                  </div>
                  <!--                <div>-->
                  <!--                  <span>备注：</span>-->
                  <!--                  <span>{{ scope.row.memo }}</span>-->
                  <!--                </div>-->
                </div>
                <div v-else>
                  <div class="img-box">
                    <span>子订单号：</span>
                    <span>{{ scope.row.childOrderId }}</span>
                  </div>
                  <div class="img-box">
                    <span>4px出库委托号：</span>
                    <span>{{ scope.row.consignmentNo }}</span>
                  </div>
                  <div>
                    <span>国内运单号：</span>
                    <span>{{ scope.row.trackingNo }}</span>
                  </div>
                  <div class="img-box">
                    <span>国际运单号：</span>
                    <span>{{ scope.row.intlTrackingNo }}</span>
                  </div>
                  <div class="img-box">
                    <span>揽收状态：</span>
                    <span style="color: #2d90d9">{{ scope.row.handoverStatusName }}</span>
                  </div>
                  <div class="img-box">
                    <span>商品主图：</span>
                    <imagePreview :src="scope.row.snapshotSmallPhotoPath" width="50px" height="50px"/>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品信息" min-width="300">
              <template slot-scope="scope">
                <div v-if="scope.row.childOrderId">
                  <div>
                    <span>ProductID：</span>
                    <span>{{ scope.row.productId }}</span>
                  </div>
                  <div>
                    <span>产品ID：</span>
                    <span>{{ scope.row.collectProductId }}</span>
                  </div>
                  <div>
                    <span>商品编码：</span>
                    <span>{{ scope.row.skuCode }}</span>
                  </div>
                  <div>
                    <el-tooltip effect="dark" :content="scope.row.productName" placement="top">
                      <el-button type="text">
                        <div class="hidden-box">
                          <span>商品名称：</span>
                          <span>{{ scope.row.productName }}</span>
                        </div>
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div>
                    <span>买家选择物流方式：</span>
                    <span>{{ scope.row.logisticsType }}</span>
                  </div>
                </div>
                <div v-else>
                  <div v-if="scope.row.leftEndGoodTime" style="color: #ff4949">
                    <span>剩余时间：</span>
                    <span>
                    <count-down :endTime="endTime(scope.row.leftEndGoodTime)" endText="已结束"/>
                  </span>
                  </div>
                  <div style="display: flex">
                    <span>物流状态：</span>
                    <span>
                    <dict-tag :options="dict.type.erp_logistics_type" :value="scope.row.logisticsType"></dict-tag>
                  </span>
                  </div>
                  订单号：{{ scope.row.orderId }}
                  <div>
                    <span>店铺：</span>
                    <span>{{ scope.row.sellerLoginId }}</span>
                  </div>
                  <div>
                    <span>卖家全名：</span>
                    <span>{{ scope.row.sellerSignerFullname }}</span>
                  </div>
                  <div>
                    <span>所属公司：</span>
                    <span>
                     <el-button size="mini" type="text"
                                @click="getErpAgentBranchInfo(scope.row)">查看所属公司</el-button>
                  </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单金额" prop="bizType" min-width="180">
              <template slot-scope="scope">
                <div v-if="scope.row.childOrderId">
                  <div>
                    <span>采购成本：</span>
                    <span v-if="scope.row.orderData.payCurrencyCode == 'USD'">
                    {{ scope.row.skuPrice == null ? '未知' : countPrice(scope.row.skuPrice) + 'RMB' }}
                  </span>
                    <span v-else>{{
                        scope.row.skuPrice == null ? '未知' : countPrice(scope.row.skuPrice) + 'RMB'
                      }} </span>
                  </div>
                  <div>
                    <span>商品数量：</span>
                    <span>{{ scope.row.productCount }}</span>
                  </div>
                  <div>
                    <span>商品规格：</span>
                    <span>{{ scope.row.skuPropertyIds }}</span>
                  </div>
                </div>
                <div v-else>
                  <div v-if="scope.row.payCurrencyCode == 'USD'">
                    <div>订单金额：{{ countPrice(scope.row.payAmount) }} RMB</div>
                    <div>联盟佣金：{{ countPrice(scope.row.afflicateFeeRate) }} RMB</div>
                    <div>交易佣金：{{ countPrice(scope.row.escrowFeeRate) }} RMB</div>
                    <div>预估利润：
                      {{
                        scope.row.estimatedProfit == null ? '未知' : scope.row.estimatedProfit + 'RMB'
                      }}
                    </div>
                  </div>
                  <div v-else>
                    <div>订单金额：{{ countPrice(scope.row.payAmount) }} RMB</div>
                    <div>联盟佣金：{{ countPrice(scope.row.afflicateFeeRate) }} RMB</div>
                    <div>交易佣金：{{ countPrice(scope.row.escrowFeeRate) }} RMB</div>
                    <div>预估利润：{{
                        scope.row.estimatedProfit == null ? '未知' : scope.row.estimatedProfit + 'RMB'
                      }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="时间" prop="orderStatus" min-width="200">
              <template slot-scope="scope">
                <div v-if="scope.row.childOrderId">
                  <div>创建时间：{{ scope.row.orderData.gmtCreate }}</div>
                  <div>付款时间： {{ scope.row.orderData.gmtPayTime }}</div>
                  <div>更新时间： {{ scope.row.orderData.updateTime }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.childOrderId">
                  <div v-if="scope.row.handoverStatusName != '未组包'">
                    <el-button size="mini" type="text" @click="getNoodleList(scope.row)">打印面单
                    </el-button>
                    <el-button v-if="scope.row.printed != '1'" size="mini" type="text"
                               @click="printingComplete(scope.row)">打印完成
                    </el-button>
                  </div>
                  <el-button v-if="scope.row.handoverStatusName == '未组包'" size="mini" type="text"
                             @click="handCreateBale(scope.row)">组包
                  </el-button>
                  <el-button size="mini" type="text" @click="modifyWaybillNumber(scope.row)">修改国际运单号</el-button>
                  <!--                  <el-button size="mini" type="text" @click="transferStorage(scope.row)">转仓储</el-button>-->
                  <!--                  <el-button size="mini" type="text">{{ scope.row.handoverStatusName }}</el-button>-->
                </div>
                <div v-else>
                  <el-button size="mini" type="text" @click="openOrderDetail(scope.row)">详情</el-button>
                  <!--                  <el-button size="mini" type="text" @click="declarationShipment(scope.row)">快速声明发货</el-button>-->
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="item.name == '333'" v-loading="loading" ref="multipleTable" :data="packagedList"
                    default-expand-all row-key="id" :tree-props="{children: 'list'}" border>
            <el-table-column width="50" align="center">
              <template slot="header" slot-scope="scope">
                <el-checkbox v-model="checkAll" @change="selectAllCheckbox()"></el-checkbox>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row.orderCode">
                  <el-checkbox v-model="scope.row.checkValue" @change="changeCheckbox(scope.row)"></el-checkbox>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单号信息" prop="orderId" width="250">
              <template slot-scope="scope">
                <div v-if="scope.row.orderCode">
                  <div>
                    <span>交接单ID：</span>
                    <span>{{ scope.row.handoverOrderId }}</span>
                  </div>
                  <div>
                    <span>交接批次号：</span>
                    <span>{{ scope.row.handoverContentId }}</span>
                  </div>
                  <div>
                    <span>交接物编码：</span>
                    <span>{{ scope.row.handoverContentCode }}</span>
                  </div>
                </div>
                <div v-else>
                  <div>
                    <span>订单号：</span>
                    <span>{{ scope.row.orderId }}</span>
                  </div>
                  <div>
                    <span>国际运单号：</span>
                    <span>{{ scope.row.intlTrackingNo }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="包裹信息" prop="bizType" width="250">
              <template slot-scope="scope">
                <div v-if="scope.row.orderCode">
                  <div>
                    <span>交接物状态：</span>
                    <span :class="scope.row.statusName=='已到达仓库'?'':'text-danger'">{{ scope.row.statusName }}</span>
                  </div>
                  <div>
                    <span>组包时间：</span>
                    <span>{{ scope.row.createTime }}</span>
                  </div>
                </div>
                <div v-else>
                  <div>
                    <span>店铺账号：</span>
                    <span>{{ scope.row.sellerLoginId }}</span>
                  </div>
                  <div>
                    <span>物流方案：</span>
                    <span>{{ scope.row.solutionCode }}</span>
                  </div>
                  <div class="mt10">
                    <span v-for="(item,index) in scope.row.photoProduct" :key="index" class="mr10">
                      <imagePreview :src="item" width="60px" height="60px"/>
                    </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="orderId" min-width="500">
              <template slot-scope="scope">
                <div v-if="scope.row.orderCode">
                  <div>
                    <span>大包备注：</span>
                    <span>{{ scope.row.remark }}</span>
                  </div>
                </div>
                <div v-else>
                  <div>
                    <span>订单创建时间：</span>
                    <span>{{ scope.row.gmtCreate }}</span>
                  </div>
                  <div>
                    <span>订单剩余时间：</span>
                    <span class="text-danger">
                    <count-down :endTime="endTime(scope.row.leftEndGoodTime)" endText="已结束"/>
                    </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.orderCode">
                  <el-button size="mini" type="text" @click="handoverOrder(scope.row)">打印面单</el-button>
                  <el-button size="mini" type="text" @click="openGroupCheckOrderModal(scope.row)">查看订单</el-button>
                </div>
                <div v-else>
                  <el-button size="mini" type="text" @click="getOrderLog(scope.row)">查看订单日志</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
    <!--  订单详情  -->
    <order-detail v-if="isOpenOrderDetail" :id="orderId" @orderDetailSwitch="orderDetailSwitch"></order-detail>
    <!--  面单  -->
    <el-dialog
      title="面单"
      :visible.sync="isOpenNoodleList"
      width="80%">
      <div class="mb10 layui-font-20">
        {{ noodleData.stringMsg }}
      </div>
      <div style="width: 100%;height: 80vh">
        <iframe width="100%" height="100%" src="" frameborder="0" id="iframe"></iframe>
      </div>
    </el-dialog>
    <el-dialog
      title="修改国际运单号"
      :visible.sync="isEditWaybillNumber"
      width="400px">
      <div>
        <el-input v-model="intlTrackingNo" type="text" placeholder="请输入国际运单号"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeWaybillNo">取 消</el-button>
        <el-button type="primary" @click="confirmWaybillNo()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 转仓储选择仓库 -->
    <el-dialog
      title="转仓储选择仓库"
      :visible.sync="isTransfer"
      width="670px">
      <div class="edit-box">
        <el-form size="small" :model="transferForm" :rules="transferRules" ref="transferRef"
                 label-width="120px">
          <el-form-item label="选择仓库：" prop="warehouseId">
            <el-select v-model="transferForm.warehouseId" placeholder="请选择仓库" size="small">
              <el-option
                v-for="dict in warehouseList"
                :key="dict.warehouseName"
                :label="dict.warehouseName"
                :value="dict.warehouseId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isTransfer = false">取 消</el-button>
        <el-button type="primary" @click="confirmTransfer()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 订单日志 -->
    <order-log v-if="isShowOrderLog" :orderId="orderId" @closeOrderLogModal="closeOrderLogModal"></order-log>
    <!--  查看订单  -->
    <groupCheckOrder v-if="isOpenCheckOrderModal" :handoverOrderId="handoverOrderId"
                     @closeGroupCheckOrder="closeGroupCheckOrder"></groupCheckOrder>
  </div>
</template>

<script>
import orderDetail from '@/views/components/order/order-detail.vue'
import countDown from '@/views/components/countDown/index.vue';
import orderLog from "@/views/order/components/orderLog.vue";
import groupCheckOrder from "@/views/order/components/group-check-order.vue";

import {
  getErpAgentBranchInfo,
  listSellerOrder, selectHandoverOrderDetails, selectHandoverOrderList
} from '@/api/order/purchaser'
import {
  sellerShipmentForCaiNiao,
  aeHandoverCommit,
  getOrderExpressSheet,
  autoHandoverCommit,
  getHandoverOrderStoreList,
  updatelntlTrackingNo,
  printed,
  getHandoverOrders
} from "@/api/order/packGroup";
import {
  addWarehousInfo,
  warehouseList
} from "@/api/warehouse/warehouse";

export default {
  name: 'SellerOrder',
  components: {
    orderDetail,
    countDown,
    orderLog, groupCheckOrder
  },
  dicts: ['county_code', 'erp_logistics_type'],
  data() {
    return {
      isShowOrderLog: false,//是否显示订单日志
      isOpenNoodleList: false,//是否显示打印面单弹窗
      checkValue: false,
      orderId: '',
      loading: false, // 遮罩层
      chooseOrderList: [], // 选中数组
      chooseChildOrderIdList: [],//选中的子订单Id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      sellerOrderList: [], // 卖家订单表格数据
      handoverOrderList: [],
      title: '订单详情', // 弹出层标题
      isOpenOrderDetail: false, // 是否打开订单详情弹窗
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: undefined,
        statusList: "109",
        sellerLoginId: "",
        orderProcessFlag: "cainiao",
        handoverOrderId: "",
        handoverContentCode: undefined,//大包号
        remark: undefined,
        type: '1',
      }, // 查询参数
      tabsValue: '109',
      tabsList: [{
        name: '109',
        label: '待组包'
      }, {
        name: '333',
        label: '已组包'
      }, {
        name: '116',
        label: '组包入库'
      }],
      isChooseOrder: false,//勾选订单后刷新订单列表
      noodleData: "",//面单信息
      storeList: [],//店铺列表
      isEditWaybillNumber: false,//
      childOrderId: "",
      intlTrackingNo: "",
      isTransfer: false,
      transferForm: {},
      transferRules: {
        warehouseId: [{required: true, message: '请选择仓库', trigger: 'change'}]
      },
      warehouseList: [], // 仓库列表
      checkAll: false,//全选
      isPackaged: false,
      isOpenCheckOrderModal: false,//是否打开查看订单弹窗
      groupChildOrderList: [],//已组包订单子订单列表
      handoverOrderId: ''
    }
  },
  computed: {
    endTime() {
      return time => {
        return new Date(
          time).getTime() / 1000 + ' '
      }
    },
    //已组包订单列表
    packagedList: {
      get() {
        return this.handoverOrderList
      },
      set(val) {
        this.handoverOrderList = val
      }
    },
    groupOrderList: {//待组包订单列表
      get() {
        return this.sellerOrderList
      },
      set(val) {
        console.log('val', val)
        this.sellerOrderList = val
      }
    }
  },
  created() {
    this.userInfo = this.$store.state.user.urserInfo;
    this.getList();
    this.getStoreList();
    // this.getWarehouseList();
  },
  methods: {
    // 获取已组包订单列表
    getHandoverOrderList() {
      this.loading = true
      selectHandoverOrderList(this.queryParams).then(response => {
        let list = response.rows
        this.handoverOrderList = list
        for (let i = 0; i < list.length; i++) {
          this.handoverOrderList[i]['checkValue'] = false
        }
        this.chooseOrderList = [] // 清空所选择的订单
        this.total = response.total
        this.loading = false
      })
    },
    // 打开已组包订单中子订单列表弹窗
    openGroupCheckOrderModal(row) {
      this.handoverOrderId = row.handoverOrderId
      console.log('%%%', row.handoverOrderId)
      this.isOpenCheckOrderModal = true
    },
    // 关闭已组包子订单弹窗
    closeGroupCheckOrder() {
      this.isOpenCheckOrderModal = false
    },
    // 获取订单店铺层级关系
    getErpAgentBranchInfo(row) {
      getErpAgentBranchInfo({sellerLoginId: row.sellerLoginId}).then(res => {
        let list = res.data;
        let message = "";
        for (let i = 0; i < list.length; i++) {
          message += `<div>` + list[i].branch + '——' + list[i].agent + '——' + list[i].userInfo + `</div>`
        }
        // console.log('***', message)
        this.$confirm(message, '所属公司', {
          dangerouslyUseHTMLString: true,
        }).then(() => {

        })
      })
    },
    // 获取仓库列表
    getWarehouseList() {
      warehouseList().then(response => {
        this.warehouseList = response.data;
      });
    },
    // 转仓储
    transferStorage(row) {
      this.isTransfer = true;
      this.transferForm.childOrderId = row.id;
      this.transferForm.type = '0';
    },
    // 转仓储
    confirmTransfer() {
      this.$refs["transferRef"].validate(valid => {
        if (valid) {
          addWarehousInfo(this.transferForm).then(response => {
            this.$message({
              type: 'success',
              message: response.msg
            })
            this.isTransfer = false;
            this.getList();
          }).finally(() => {
            this.isTransfer = false;
          })
        }
      })
    },
    // 修改国际运单号
    modifyWaybillNumber(row) {
      this.childOrderId = row.childOrderId
      this.isEditWaybillNumber = true
    },
    confirmWaybillNo() {
      this.$confirm('是否确定修改国际运单号？', '提示').then(() => {
        let data = {
          childOrderId: this.childOrderId,
          intlTrackingNo: this.intlTrackingNo
        }
        updatelntlTrackingNo(data).then(res => {
          this.$message.success(res.msg)
          this.isOpenNoodleList = false
          this.getList()
        })
      })
    },
    closeWaybillNo() {
      this.isEditWaybillNumber = false
    },
    //  获取店铺列表
    getStoreList() {
      getHandoverOrderStoreList().then(response => {
        this.storeList = response.data
      })
    },
    // 选择店铺
    chooseStore(e) {
      this.queryParams.sellerLoginId = e
      this.getList()
    },
    // 菜鸟声明发货
    declarationShipment(row) {
      this.$confirm('是否确定执行声明发货操作？', '提示').then(() => {
        // let childOrderIds = row.sellerChildOrderList.map(item => item.childOrderId)
        let data = {
          // childOrderIds: childOrderIds.toString()
          orderId: row.orderId
        }
        sellerShipmentForCaiNiao(data).then(res => {
          this.$message.success(res.msg)
          this.isOpenNoodleList = false
          this.getList()
        })
      })
    },
    // 自动组包
    autoHandoverCommit() {
      this.$confirm("是否确定执行自动组包操作？", '提示').then(() => {
        autoHandoverCommit().then(res => {
          this.$message.success(res.msg)
        })
      })

    },
    // 操作栏组包
    handCreateBale(row) {
      this.$confirm('是否确定执行打包操作？', '提示').then(() => {
        aeHandoverCommit({childOrderIds: row.childOrderId}).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      })
    },

    // 手动组包
    createBale(list) {
      // if (!this.queryParams.sellerId) {
      //   this.$message.error('请先选择店铺！')
      //   return
      // }
      let orderList = this.sellerOrderList
      let childOrderIds = []
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < orderList.length; j++) {
          if (list[i] == orderList[j].orderId) {
            for (let k = 0; k < orderList[j].sellerChildOrderList.length; k++) {
              childOrderIds.push(orderList[j].sellerChildOrderList[k].childOrderId)
            }
          }
        }
      }
      this.$confirm('是否确定执行打包操作？', '提示').then(() => {
        aeHandoverCommit({childOrderIds: childOrderIds.toString()}).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      })
      console.log('childOrderIds', childOrderIds)
    },
    // 切换选项卡
    tabsClick(tab, event) {
      this.queryParams.statusList = tab.name
      if (tab.name == '333') {
        // this.queryParams.pageSize = 5
        this.getHandoverOrderList()
      } else {
        // this.queryParams.pageSize = 10
        this.getList()
      }
    },
    // 订单详情弹窗开关
    orderDetailSwitch(e) {
      this.isOpenOrderDetail = e
    },
    /** 查询卖家订单列表 */
    getList() {
      this.loading = true
      if (this.tabsValue == '333') {
        // this.queryParams.pageSize = 5
        this.getHandoverOrderList()
      } else {
        listSellerOrder(this.queryParams).then(response => {
          let list = response.rows
          this.sellerOrderList = list
          for (let i = 0; i < list.length; i++) {
            this.sellerOrderList[i]['checkValue'] = false
            for (let j = 0; j < list[i].sellerChildOrderList.length; j++) {
              if (list[i].orderId == list[i].sellerChildOrderList[j].orderId) {
                this.sellerOrderList[i].sellerChildOrderList[j]['erpInnerOrderStatus'] = this.sellerOrderList[i].erpInnerOrderStatus
                this.sellerOrderList[i].sellerChildOrderList[j]['orderData'] = this.sellerOrderList[i]
                this.sellerOrderList[i].sellerChildOrderList[j].id = String(this.sellerOrderList[i].sellerChildOrderList[j].id)
                this.sellerOrderList[i]['orderIndex'] = i
              }
            }
          }
          // console.log('this.sellerOrderList', this.sellerOrderList)
          this.chooseOrderList = [] // 清空所选择的订单
          this.total = response.total
          this.loading = false
        })
      }
      // if (this.tabsValue == '113') {
      // this.queryParams.orderProcessFlag = 'cainiao'
      // }

    },
    // 打印完成
    printingComplete(row) {
      this.$confirm("是否确定已完成打印？", '提示').then(() => {
        printed({childOrderId: row.childOrderId}).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      })
    },
    // 查看订单日志
    getOrderLog(row) {
      this.orderId = row.orderId
      this.isShowOrderLog = true
    },
    // 关闭订单日志
    closeOrderLogModal(e) {
      this.isShowOrderLog = e
    },

    // 打印面单
    handoverOrder(row) {
      this.$confirm("是否确定打印面单？", '提示').then(() => {
        getHandoverOrders({handoverOrderId: row.handoverOrderId}).then(res => {
          if (res.data) {
            this.noodleData = res.data
            this.isOpenNoodleList = true;
            setTimeout(() => {
              let iframe = document.getElementById("iframe")
              let base = this.noodleData.printData
              let s = this.base64FileHeaderMapper(base);
              let blob = this.base64ToBlob(base, s);
              iframe.src = URL.createObjectURL(blob);
            }, 100)
          }
        })
      })
    },
    // 打印面单
    getNoodleList(row) {
      this.$confirm("是否确定打印面单？", '提示').then(() => {
        let data = {
          id: row.childOrderId,
          type: "1"
        }
        getOrderExpressSheet(data).then(res => {
          if (res.data) {
            this.noodleData = res.data
            this.isOpenNoodleList = true;
            setTimeout(() => {
              let iframe = document.getElementById("iframe")
              let base = this.noodleData.printData
              let s = this.base64FileHeaderMapper(base);
              let blob = this.base64ToBlob(base, s);
              iframe.src = URL.createObjectURL(blob);
            }, 100)
          }
        })
      })
    },
    base64ToBlob(code, type) {
      code = code.replace(/[\n\r]/g, "");
      let raw = window.atob(code);
      let rawLength = raw.length;
      let uint8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      if ("pdf" === type) {
        return new Blob([uint8Array], {
          type: "application/pdf"
        });
      } else {
        return new Blob([uint8Array], {
          type: "image/jpeg"
        });
      }
    },
    base64FileHeaderMapper(fileBase64) {
      let fileHeader = new Map();
      //获取不同文件的文件头前3个字作为判断依据
      fileHeader.set("/9j", "jpeg");
      fileHeader.set("iVB", "png");
      // fileHeader.set("Qk0", "BMP")
      // fileHeader.set("SUk", "TIFF")
      fileHeader.set("JVB", "pdf");
      // fileHeader.set("UEs", "OFD")
      let res = "";
      //遍历map中所提及的文件头特征
      fileHeader.forEach((v, k) => {//箭头函数IE不支持 兼容IE需改写
        if (k == fileBase64.substr(0, 3)) {
          res = v;
        }
      });
      //如果不在map中返回unknown file
      if (res == "") {
        res = "unknown file";
      }
      //否则返回map中的value值
      return res;
    },
    // 取消按钮
    cancel() {
      this.isOpenOrderDetail = false
      this.reset()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 全选
    selectAllCheckbox(selection) {
      const ls = [...this.groupOrderList]
      // console.log('selection', selection)
      // this.checkAll = !this.checkAll
      if (this.checkAll == true) {
        this.chooseOrderList = ls.map(item => item.orderId)
      } else {
        this.chooseOrderList = []
      }
      ls.forEach((item) => {
        console.log('this.checkAll', this.checkAll == true)
        item.checkValue = this.checkAll
      })

      console.log(' this.chooseOrderList', this.chooseOrderList)
      this.groupOrderList = ls
    },
    // 选择单选框
    changeCheckbox(selection) {
      const ls = [...this.groupOrderList]
      ls.forEach((item) => {
        if (selection.orderId == item.orderId) {
          item.checkValue = selection.checkValue
          if (selection.checkValue) {
            this.chooseOrderList.push(selection.orderId)
          } else {
            this.chooseOrderList = this.chooseOrderList.filter(item => item !== selection.orderId);
          }
        }
      })
      console.log('this.chooseOrderList', this.chooseOrderList)
      this.groupOrderList = ls
    },
    //查看订单详情
    openOrderDetail(row) {
      this.orderId = row.orderId
      this.isOpenOrderDetail = true
    },
    jumpPage(skuBuyLink) {
      window.open(skuBuyLink)
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}


.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
  padding: 0;
}

.el-form-item el-form-item--small {
  margin-bottom: 0;
}

.el-form--label-left .el-form-item__label {
  text-align: right;
}

.demo-table-expand .el-form-item {
  width: 16%;
  margin-bottom: 0;
  margin-right: 0;
}

.img-box {
  display: flex;
  align-items: flex-start;
}

.edit-box {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  margin-bottom: 20px;
}

.edit-box-name {
  width: 120px;
  text-align: right;
}

.edit-box input {
  display: block;
}

/*去掉number输入框的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/*解决输入中文后光标上移的问题*/
.el-input__inner {
  line-height: 1px !important;
}
</style>
